<template>
  <div style="height: 100%">
    <el-dialog
      class="base-dialog system-user-dialog"
      :custom-class="'panna-dialog_big'"
      :class="{ readonly: !hasChooseTemplate }"
      append-to-body
      :title="title"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="innerDialogFormVisible"
    >
      <div v-if="!hasChooseTemplate" style="height: 100%">
        <ExperimentTemplateList :operate-type="0" @cite="handleCite" />
      </div>
      <div v-else style="height: 100%">
        <ExperimentTemplateRecordEdit
          ref="ExperimentTemplateRecordEdit"
          v-model="recordData"
          :operate-type="0"
          :dialog-form-visible.sync="hasChooseTemplate"
          @callback="resetList"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ExperimentTemplateList from "../ExperimentTemplate/ExperimentTemplateList.vue";
import ExperimentTemplateRecordEdit from "./ExperimentTemplateRecordEdit.vue";
import { deepClone } from "../../../utils/index";
export default {
  name: "ExperimentTemplateRecordAdd",
  components: { ExperimentTemplateList, ExperimentTemplateRecordEdit },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      innerDialogFormVisible: false,
      hasChooseTemplate: false,
      recordData: [],
    };
  },
  computed: {
    title() {
      return this.hasChooseTemplate ? "新建实验记录单" : "选择实验记录模板";
    },
  },
  watch: {
    dialogFormVisible(val) {
      this.innerDialogFormVisible = val;
      val && this.init();
    },
    innerDialogFormVisible(val) {
      this.$emit("update:dialogFormVisible", val);
    },
  },
  methods: {
    init() {
      this.hasChooseTemplate = false;
    },
    resetList() {
      this.innerDialogFormVisible = false;
      this.$emit("callback");
    },
    handleCite(val) {
      this.hasChooseTemplate = true;
      this.recordData = deepClone(val);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 0 !important;

}
</style>
